<template>
  <el-dialog
    title="车辆详细信息"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose">
    <h3><strong>{{ carInfo.carName }}</strong></h3>
    <el-card :body-style="{ padding: '0px' }">
      <img :src="carInfo.carImageUrl" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{  }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
  </el-dialog>


</template>

<script>
import {getCar} from "@/api/cms/car";

export default {
  props: {
  },
  name: "Detail",
  data() {
    return {
      carInfo:{},
      dialogVisible:false,
      carId:''
    };
  },
  // created() {
  //   getCar(this.props.carId)
  // },
  methods:{
    getCarInfo(dialogVisible,carId){
      console.log("调用了getInfo")
      this.dialogVisible=true
      getCar(carId).then(response => {
        this.carInfo=response.data
      });
    },
    handleClose(done) {
      this.carInfo=''
      this.dialogVisible=false
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
